import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import {
  Row,
  Col,
  Image,
  ListGroup,
  Card,
  Button,
  Form,
} from "react-bootstrap";
import Rating from "../components/Rating";
import { productDetails, createProductReview } from "../actions/productActions";
import {
  PRODUCT_CREATE_REVIEW_RESET,
  PRODUCT_DETAILS_RESET,
} from "../constants/productConstans";
import Loader from "../components/Loader";
import Message from "../components/Message";

const ProductScreen = ({ history, match }) => {
  const [qty, setQty] = useState(1);
  const [rating, setRating] = useState(0);
  const [comment, setComment] = useState("");

  //获取登录用户信息
  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;
  const dispatch = useDispatch();
  //获取商品详情返回的信息
  const productDetail = useSelector((state) => state.productDetails);
  const { loading, error, product } = productDetail;
  //获取创建商品评论返回的信息
  const productReviewCreate = useSelector((state) => state.productReviewCreate);
  const {
    loading: loadingProductReview,
    success: successProductReview,
    error: errorProductReview,
  } = productReviewCreate;

  useEffect(() => {
    if (successProductReview) {
      alert("评论成功");
      setRating(0);
      setComment("");
    }
    if (
      !product._id ||
      product._id !== match.params.id ||
      successProductReview
    ) {
      dispatch({ type: PRODUCT_DETAILS_RESET });
      dispatch(productDetails(match.params.id));
      dispatch({ type: PRODUCT_CREATE_REVIEW_RESET });
    }
  }, [dispatch, match, successProductReview]);

  //添加到购物车事件
  const addToCartHandle = () => {
    history.push(`/cart/${match.params.id}?qty=${qty}`);
  };

  //添加评论提交按钮
  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(createProductReview(match.params.id, { rating, comment }));
  };

  return (
    <>
      <Link className="btn btn-dark my-3" to="/">
        返回主页
      </Link>
      {loading ? (
        <Loader></Loader>
      ) : error ? (
        <Message variant="danger">{error}</Message>
      ) : (
        <>
          {/* 商品详情区域 */}
          <Row>
            <Col xl={6}>
              <Image src={product.image} alt={product.name} fluid></Image>
            </Col>
            <Col xl={3}>
              <ListGroup variant="flush">
                <ListGroup.Item>
                  <h3>{product.name}</h3>
                </ListGroup.Item>
                <ListGroup.Item>
                  <Rating
                    value={product.rating}
                    text={`${product.numReviews}条评论`}
                  ></Rating>
                </ListGroup.Item>
                <ListGroup.Item>价格：¥{product.price}</ListGroup.Item>
                <ListGroup.Item>描述：{product.description}</ListGroup.Item>
              </ListGroup>
            </Col>
            <Col xl={3}>
              <Card>
                <ListGroup variant="flush">
                  <ListGroup.Item>
                    <Row>
                      <Col>价格：</Col>
                      <Col>
                        <strong>¥{product.price}</strong>
                      </Col>
                    </Row>
                  </ListGroup.Item>
                  <ListGroup.Item>
                    <Row>
                      <Col>库存：</Col>
                      <Col>{product.countInStock > 0 ? "有货" : "没货"}</Col>
                    </Row>
                  </ListGroup.Item>
                  <ListGroup.Item>
                    <Row>
                      <Col>数量：</Col>
                      <Col>
                        <Form.Control
                          as="select"
                          value={qty}
                          onChange={(e) => {
                            setQty(e.target.value);
                          }}
                        >
                          {[...Array(product.countInStock).keys()].map((i) => (
                            <option key={i + 1} value={i + 1}>
                              {i + 1}
                            </option>
                          ))}
                        </Form.Control>
                      </Col>
                    </Row>
                  </ListGroup.Item>
                  <ListGroup.Item>
                    <Button
                      onClick={addToCartHandle}
                      className="btn-block"
                      disabled={product.countInStock == 0}
                      type="button"
                    >
                      添加到购物车
                    </Button>
                  </ListGroup.Item>
                </ListGroup>
              </Card>
            </Col>
          </Row>

          {/* 商品评论区域 */}
          <Row>
            <Col md={6}>
              <h2>评论</h2>
              {product.reviews && product.reviews.length == 0 && (
                <Message>没有评论</Message>
              )}
              <ListGroup variant="flush">
                {product.reviews &&
                  product.reviews.map((review) => (
                    <ListGroup.Item key={review._id}>
                      <strong>{review.name}</strong>
                      <Rating value={review.rating}></Rating>
                      <p>{review.createdAt.substring(0, 10)}</p>
                      <p>{review.comment}</p>
                    </ListGroup.Item>
                  ))}
                <ListGroup.Item>
                  <h2>添加评论</h2>
                  {loadingProductReview && <Loader></Loader>}
                  {errorProductReview && (
                    <Message variant="danger">{errorProductReview}</Message>
                  )}
                  {userInfo ? (
                    <Form onSubmit={submitHandler}>
                      <Form.Group controlId="rating">
                        <Form.Label>评分：</Form.Label>
                        <Form.Control
                          as="select"
                          value={rating}
                          onChange={(e) => setRating(e.target.value)}
                        >
                          <option value="">选择评分...</option>
                          <option value="1">1 - 非常不满意</option>
                          <option value="2">2 - 不满意</option>
                          <option value="3">3 - 一般</option>
                          <option value="4">4 - 满意</option>
                          <option value="5">5 - 非常满意</option>
                        </Form.Control>
                      </Form.Group>
                      <Form.Group controlId="comment">
                        <Form.Control
                          as="textarea"
                          row="3"
                          value={comment}
                          onChange={(e) => setComment(e.target.value)}
                        ></Form.Control>
                      </Form.Group>
                      <Button type="submit" variant="primary">
                        提交评论
                      </Button>
                    </Form>
                  ) : (
                    <Message>
                      请<Link to="/login">登录</Link>后再添加评论
                    </Message>
                  )}
                </ListGroup.Item>
              </ListGroup>
            </Col>
          </Row>
        </>
      )}
    </>
  );
};

export default ProductScreen;
